<template>
<div>
    <div style="line-height:30px">
        <span style="color:#666;font-size:18px">新闻管理</span>
    </div>
    <div style="height:5px;background:#fffeee;margin-bottom:10px"></div>

    <Row>
        <Col span="4">
            <Tree :data="data" @on-select-change="onSelectChangeNews"></Tree>
        </Col>
        <Col span="20">
            <ButtonGroup style="float:right;margin-right:50px;margin-bottom:10px">
        <Button type="primary" @click="addDate" style="margin-right:20px">添加数据</Button>
        <Button type="error" @click="removes">批量删除</Button>
    </ButtonGroup>
    <Input v-model="filter.name" style="width:300px;margin-bottom:10px">
        <Button slot="append" icon="ios-search" @click="search"></Button>
    </Input>
    <Table border :columns="columns" :data="list" @on-selection-change="onSelectionChange"></Table>
    <Page :total="filter.total" :page-size="filter.rows" @on-change="onPagechange" @on-page-size-change="onPagesizechange" show-sizer ></Page>

    <Modal
        v-model="operateModal"
        title="数据处理"
        width='900px'
        
        >
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="选择分类" prop="xz">
            <Cascader :data="data" @on-change="onChangeNews"></Cascader>
        </FormItem>
        <FormItem label="标题" prop="name">
            <Input v-model="formValidate.name" placeholder="Enter your title"></Input>
        </FormItem>
        <FormItem label="详情" prop="content" style="height:250px">
            <quill-editor v-model="formValidate.content" style="height:150px">
            </quill-editor>
        </FormItem>
        
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
        
        
    </Form>
    <div slot="footer">
           数据操作！
        </div>
    </Modal>

    
        </Col>
    </Row>

    
</div>
</template>
<script>
    import moment from 'moment';
    export default {
     
        data () {
            return {
               details:{
                   mame:'',
                   content:''
               },
                formValidate: {
                    name: '',
                    content: '',
                    date:'',
                    parentId:0
                    
                },
                modal1: false,
                data:[],
                ruleValidate: {
                    name: [
                        { required: true, message: '标题不能为空', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '新闻内容不能为空', trigger: 'blur' },
                    ],
                   
                },
                operateModal:false,
            list: [],
            filter:{
                total:0,
                rows:10,
                page:1,
                name:'',
                parentId:0,
                
            },
            ids:[],
            id:0,
            allid:[],
               
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '标题',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                   {
                    title:'新闻详情',
                    key:'content',
                    render:(h,params)=>{
                        return h('span',{
                            domProps:{
                                innerHTML:params.row.content
                            }
                        })
                    }
                   },
                   {
                    title:'发布日期',
                    key:'date',
                    render:(h,params)=>{
                        return h('div', [
                                h('span', moment(params.row.date).format('YYYY-MM-DD HH:mm:ss'))
                            ]);
                    }
                   },
                   {
                    title:'评论数',
                    key:'commentCount'
                   },
                    {
                        title: '操作',
                        key: 'action',
                        width: 250,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '6px'
                                    },
                                    on: {
                                        click: () => {
                                            this.xqData(params)
                                        }
                                    }
                                }, '详情'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '6px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editDate(params)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, '删除'),
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style:{
                                        marginLeft:'6px'
                                    },
                                    on: {
                                        click: () => {
                                            this.$router.push({name: 'comment', params: {newsId:params.row._id}})
                                        }
                                    }
                                }, '查看评论'),
                            ]);
                        }
                    }
                ]  
            }
        },
        methods:{
            //点击查看详情
            xqData(params){
                
                this.modal1=true
                this.axios({
                    url:`http://localhost:3000/news/data/${params.row._id}`,
                    method:'get'
                }).then(res=>{
                    this.$Modal.info({
                    title: '新闻详情',
                    content: `Name：${res.data.name}<br>Age：${res.data.content}`
                    })
                })

                
                
                
            },
            ok () {
                this.$Message.info('Clicked ok');
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
            //添加数据选择分类
            onChangeNews(value,icon){
                if(value!=''){
                    this.formValidate.parentId=icon[icon.length-1]._id
                    
                }
            },
            //点击分类
            onSelectChangeNews(value){ 
                
               if(value!=''){
                    this.filter.parentId=value[0]._id
                    this.getlistData()
               }           
               
            },
            //获取新闻分类
            getnewsData(){
                this.axios({
            url:`http://localhost:3000/cate/list/3`,
            method:'get',
            
            }).then(res=>{
            
            this.data=res.data
            })
            },
            //清除form表单
            handleReset (name) {
            this.$refs[name].resetFields();
        },
        //删除一个
        remove (params) {
           

            this.$Modal.confirm({
                title: '确认删除数据？',
                content: '<p>你确认删除该条数据吗</p>',
                onOk: () => {
                    this.axios({
                        url:`http://localhost:3000/news/data/${params.row._id}`,
                        method:'delete'
                    }).then(res=>{
                        this.$Message.info('删除数据成功')
                        this.getlistData()
                    })
                },
                onCancel: () => {
                    this.$Message.info('取消删除');
                }
            });
        },
        //获取新闻数据
        getlistData(){
            this.axios({
            url:`http://localhost:3000/news/list`,
            method:'post',
            data:{
                rows:this.filter.rows,
                page:this.filter.page,
                name:this.filter.name,
                parentId:this.filter.parentId
            }
        }).then(res=>{
            
            this.list=res.data.rows;
            this.filter.total=res.data.total;
        })
        },
        //分页
        onPagechange(page){
            this.filter.page=page;
            this.getlistData()
        },
        onPagesizechange(rows){
            this.filter.rows=rows;
            this.getlistData()
        },
        //获取id
        onSelectionChange(selection){
            var ids=[]
            for(let i=0;i<selection.length;i++){
                ids.push(selection[i]._id)
            }
            this.ids=ids
        },
        //删除多个
        removes(){
           
           this.$Modal.confirm({
                title: '确认删除数据？',
                content: '<p>你确认删除该条数据吗</p>',
                onOk: () => {
                    

                    this.axios({
                        url:`http://localhost:3000/news/removes`,
                        method:'post',
                        data:{
                            ids:this.ids.toString()
                        }
                    }).then(res=>{
                        this.$Message.info('删除数据成功')
                        this.getlistData()
                    })
                },
                onCancel: () => {
                    this.$Message.info('取消删除');
                }
            });
        },
        //添加
        addDate(){
            this.formValidate={}
           
            this.operateModal=true
        },
        //修改
        editDate(params){
           
            this.axios({
                url:`http://localhost:3000/news/data/${params.row._id}`,
                method:'get'
            }).then(res=>{
               
                this.formValidate=res.data;
                this.operateModal=true;
                this.id=params.row._id;
                 
            })
        },
        
        //submit提交
        handleSubmit (name) {
           
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.formValidate.date=this.getNowFormatDate()
                    if(this.id!=0){
                        this.axios({
                            url:`http://localhost:3000/news/data/${this.id}`,
                            method:'put',
                            data:this.formValidate
                        }).then(res=>{
                        this.$Message.success('数据操作成功')
                        this.operateModal=false;
                        this.getlistData()
                        this.id=0
                        this.$refs[name].resetFields();
                        })
                    }else{
                     
                        this.axios({
                        url:`http://localhost:3000/news/data`,
                        method:'post',
                        data:this.formValidate
                    }).then(res=>{
                        this.$Message.success('数据操作成功')
                        this.operateModal=false;
                        this.getlistData()
                        this.$refs[name].resetFields();
                        
                    })  
                    }
                   
                } else {
                    this.$Message.error('Fail!');
                }
            })
        },
        
        //获取日期
         getNowFormatDate() {
            // var date = new Date();
            // var seperator1 = "-";
            // var seperator2 = ":";
            // var month = date.getMonth() + 1;
            // var strDate = date.getDate();
            // if (month >= 1 && month <= 9) {
            // month = "0" + month;
            // }
            // if (strDate >= 0 && strDate <= 9) {
            // strDate = "0" + strDate;
            // }
            // var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            // + " " + date.getHours() + seperator2 + date.getMinutes()
            // + seperator2 + date.getSeconds();
            // return currentdate;
            var timestamp=new Date().getTime()
            return timestamp
        },
        cancel () {
            this.$Message.info('Clicked cancel');
            this.id=0
        },
        //搜索
        search(){
            
            this.filter.page=1
            this.getlistData()
        },
           
        },
        mounted(){
            this.getnewsData()
            this.getlistData()
            
        }
    }
</script>


